<template>
  <div id="queueline">
    <van-row
      align="center"
      class="queueline-list"
      type="flex"
      v-for="(obj,index) in queuelinelists"
      :key="index"
    >
      <van-col class="bgcolor" span="3">{{obj.id}}</van-col>
      <van-col class="bgcolor" span="3">{{obj.uid}}</van-col>
      <van-col span="6">{{obj.phonenumber}}</van-col>
      <van-col span="4">
        <div class="queueline-list-4 flex flex-col">
          <van-button type="default">{{obj.per.num}}</van-button>
          <van-button type="default">{{obj.per.orderid}}</van-button>
        </div>
      </van-col>
      <van-col span="2">
        <van-button class="full" type="info">呼叫</van-button>
      </van-col>
      <van-col span="2">
        <van-button class="full" type="primary">就餐</van-button>
      </van-col>
      <van-col span="2">
        <van-button type="warning">過號</van-button>
      </van-col>
      <van-col span="2">
        <van-button class="bold bgcolor" type="default">···</van-button>
      </van-col>
    </van-row>
  </div>
</template>

<script>
export default {
  name: 'queueline',
  data() {
    return {
    }
  },
  props: {
    queuelinelists: {
      type: Array
    }
  }
}
</script>

<style scoped>
.bgcolor {
  background-color: #e4e7ed;
}
.van-button {
  font-size: 0.9rem !important;
  white-space: nowrap;
  padding: 0 0.25rem;
}
.van-col {
  white-space: nowrap;
}
#queueline {
  height: 90%;
  border: 2px solid #dcdfe6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: auto;
}
.queueline-list {
  border: 2px solid #c0c4cc;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 90px;
  margin: 0.25rem;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
}
.queueline-list .van-col {
  border: 1px solid #dcdfe6;
  height: 90px;
  line-height: 90px;
}
.queueline-list .van-button {
  height: 90px;
  width: 100%;
}
.bold {
  font-weight: bolder;
}
.queueline-list-4 .van-button {
  height: 50%;
}
</style>
